<template>
    <div style="padding-top:50px;padding-bottom:100px">
        
        <ul v-if="arr.length!==0">
            <li>
                <div :style="qxys">
                    <input type="checkbox" :checked="allcheck" @click="allcheckbox">&ensp;全选
                    <!-- <el-checkbox v-model="allcheck"  @click="allcheckbox">全选</el-checkbox> -->
                </div>
                <div>
                    商品名称
                </div>
                <div>
                    单价
                </div>
                <div>
                    数量
                </div>
                <div>
                    小计
                </div>
                <div>操作</div>
            </li>
            <li v-for="(item,index) in arr" :key="index">
                 <div class="cart_list">
                    <input type="checkbox" :checked="item.check" @click="checklist(index)">
                    <!-- <el-checkbox v-model="item.check"  @click="checklist(index)"/> -->
                </div>
                <div class="cart_list">
                    <img :src="'http://106.15.179.105:3000/'+item.productImg">
                    <span>{{item.productName}}</span>
                </div>
                <div class="cart_list">
                    {{item.price}}元
                </div>
                <div class="cart_list">
                    <div @click="jsq(item.productID)">
                    <el-input-number v-model="item.num" @change="handleChange" :min="1" :max="10" style="width:66%"></el-input-number>
                    </div>
                </div>
                <div class="cart_list">
                    <span>{{item.price*item.num}}元</span>
                </div>
                <div class="cart_list">
                    <!-- 删除 -->
                      <el-popconfirm
  title="您确定要删除此商品吗？"
  placement='right'
  @confirm="del(item.productID)"
>
  <button slot="reference" class="but_del">x</button>
</el-popconfirm>
                    <!-- 删除 -->
                </div>
            </li>
            <li style="margin-top:20px;border:none;height:50px;" class="zjsl">
                <div @click="$router.push('/text')">继续购物</div><span style="font-size:20px">|</span>
                <div class="zjsl_tow">共<span>{{zj.allbnum}}</span>件商品，已选择<span>{{zj.allnum}}</span>件</div>
                <div  class="zjsl_san">合计：<span>{{zj.allprice}}元</span></div>
                <div  class="zjsl_si" v-if="zj.allnum!==0">去结算</div>
                <div  class="zjsl_si_false" v-else>去结算</div>
            </li>
        </ul>
        <el-empty description="空空如也！！快去添加您的宝贝商品吧！！！！！" v-else></el-empty>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[],
            minNum:1,
           allcheck:false,
           qxys:'',
          allnum:0,
        };
    },

    mounted() {
        this.add();
        // console.log(this);
        
    },

    methods: {
        async add(){
          let user_id=this.$store.state.user_id
          let {data} =await this.$axios.post("api/user/shoppingCart/getShoppingCart",{user_id: user_id})
          console.log(data,"购物车")
          this.arr=data.shoppingCartData
          this.$store.commit('cartnum',data.shoppingCartData)
        },
        //数量
        handleChange(value) {
        //   console.log(value,"3333");
        this.minNum=value
      },
    async  jsq(id){
        //   console.log(id)
          let user_id=this.$store.state.user_id
        //   console.log(user_id)
                let {data}=await this.$axios.post("api/user/shoppingCart/updateShoppingCart",{user_id:user_id,product_id:id,num:this.minNum})
              console.log(data)
              if(data.code=='001'){
                   this.$message({
          message: data.msg,
          type: 'success'
        });
              }else{
                  this.$message({
          message: data.msg,
          type: 'warning'
        });
              }
      },
      checklist(index){
          this.arr[index].check=!this.arr[index].check
          this.allcheck=this.arr.every((res)=>{
              return res.check==true
          })
          if(this.allcheck==true){
              this.qxys='color:#0af'
          }
           if(this.allcheck==false){
              this.qxys=''
          }
      },
      allcheckbox(){
          this.allcheck=!this.allcheck
          if(this.allcheck==true){
              this.arr.forEach((item)=>{
                  item.check=true
              })
              this.qxys='color:#0af'
          }else{
              this.arr.forEach((item)=>{
                  item.check=false
              })
              this.qxys=''
          }
        console.log(this.allcheck)
      },
    async  del(id){
          console.log(id)
          let {data}=await this.$axios.post("api/user/shoppingCart/deleteShoppingCart",{user_id:this.$store.state.user_id,product_id:id})
          console.log(data)
         
               this.$message({
          message: data.msg,
          type: 'success'
        });
          
          this.add();
      }


    },
    // 计算属性
    computed:{
        zj(){
            let allnum=0;
            let allprice=0;
            let allbnum=0;
            this.arr.forEach((item)=>{
                allbnum+=item.num
                if(item.check==true){
                    allnum+=item.num
                    allprice+=item.num*item.price
                }
            })
            this.allbnum=allbnum
            return {allnum,allprice,allbnum}
        }
    }
  
};
</script>

<style scoped>
ul{
    width: 100%;
    min-height: 35vh;
}
ul>li:nth-child(1){
    width: 100%;
    height: 85px;
    background-color: #fff;
    border-bottom: 2px solid #bbb;
    line-height: 85px;
    display: flex;
}
ul>li:nth-child(1)>div:nth-child(1){
    width: 10%;
    text-align: center;
}
ul>li:nth-child(1)>div:nth-child(2){
    width: 35%;
    box-sizing: border-box;
    padding-left: 5%;
}
ul>li:nth-child(1)>div:nth-child(3){
    width: 10%;
    text-align: center;
}
ul>li:nth-child(1)>div:nth-child(4){
    width: 20%;
    text-align: center;
}
ul>li:nth-child(1)>div:nth-child(5){
    width: 15%;
    text-align: center;
}
ul>li:nth-child(1)>div:nth-child(6){
    width: 10%;
    text-align: center;
}
ul>li{
    width: 100%;
    height: 100px;
    background-color: #fff;
    border-bottom: 1px solid #bbb;
    line-height: 100px;
    display: flex;
}
li>.cart_list:nth-child(1){
    width: 10%;
    box-sizing: border-box;
    padding-left: 2.6%;
}
li>.cart_list:nth-child(2){
    width: 35%;
    /* text-align: center; */
    box-sizing: border-box;
    overflow: hidden;
    line-height: 100px;
}
li>.cart_list:nth-child(2)>img{
    width: 25%;
    height: 80px;
    margin-top: 10px;
    float: left;
}
li>.cart_list:nth-child(3){
    width: 10%;
    text-align: center;
}
li>.cart_list:nth-child(4){
    width: 20%;
    text-align: center;
}
li>.cart_list:nth-child(5){
    width: 15%;
    text-align: center;
    color: #ff6700;
}
li>.cart_list:nth-child(6){
    width: 10%;
    text-align: center;
}
.but_del{
    width: 20px;
    height: 20px;
    background-color: rgb(75, 75, 75);
    color: #fff;
    border-radius: 20px;
    line-height: 20px;
    font-size: 10px;
    border: none;
    text-align: center;
    cursor: pointer;
}
.but_del:hover{
    background-color: #ff6700;
}
.zjsl{
    line-height: 50px;
     width: 100%;
     font-size: 14px;
     color: #999;
}
.zjsl>div:nth-child(1){
    width: 10%;
    text-align: center;
    font-size: 16px;
    float: left;
}
.zjsl>div:nth-child(1):hover{
cursor: pointer;
color: #ff6700;
}
.zjsl_tow{
    width: 30%;
    padding-left:2.5% ;
    box-sizing: border-box;
}
.zjsl_san{
    width: 45%;
    text-align: right;
    box-sizing: border-box;
    padding-right: 5%;
}
.zjsl_si{
    width: 15%;
    height: 100%;
    background-color: #ff6700;
    text-align: center;
    color: #fff;
    font-family: cursive;
    font-size: 25px;
}
.zjsl_si_false{
    width: 15%;
    height: 100%;
    background-color: #aaa;
    text-align: center;
    color: #fff;
    font-family: cursive;
    font-size: 25px;
}
</style>